<template>
  <van-uploader accept="doc,docx" :after-read="afterRead">
    <van-button icon="plus" type="primary">上传文件</van-button>
  </van-uploader>
</template>

<script setup lang="ts">
import { jsPDF } from 'jspdf'
import { ref } from 'vue'
import 'jspdf-autotable'
import mammoth from 'mammoth'
import './font-ttf-normal.js'
const afterRead = (file) => {
  // 此时可以自行将文件上传至服务器
  convertToPDF(file.file)
}

const convertToPDF = (file) => {
  const reader = new FileReader()
  reader.readAsArrayBuffer(file)

  reader.onload = function (event) {
    const arrayBuffer = event.target.result
    mammoth
      .convertToHtml({ arrayBuffer: arrayBuffer })
      .then(function (result) {
        const html = result.value
        const pdf = new jsPDF({ orientation: 'p', format: 'a4' })
        console.log(pdf, html)
        pdf.setFont('font-ttf-normal', 'normal')
        pdf.setFontSize(20)
        // 将 HTML 内容导出为 PDF
        pdf.html(
          "<p style='font-family:font-ttf-normal;'>123123何时开放的环境</p>",
          {
            callback: function () {
              // 保存 PDF 文件
              pdf.save('exported.pdf')
            },
          }
        )
      })
      .catch(function (err) {
        alert('转换失败：' + err)
      })
  }
}
</script>

<style></style>
